//bootPage.vue
<template>
  <view class="bootPage">
    <view class="content">
      <view class="con">
        <img id="img" :src="imgUrl" @click="onSkipWeb">
      </view>
      <view class="btn" id="timer">
        <view id="info">{{time}}</view>
        <view class="circleProgress_wrapper btn" @click="onSkip">
          <view class="wrapper right">
            <view class="circleProgress rightcircle"></view>
          </view>
          <view class="wrapper left">
            <view class="circleProgress leftcircle"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    images
  } from './api.js'
  import {
    ref,
    onUnmounted
  } from 'vue'
  import {
    onLoad
  } from "@dcloudio/uni-app"
  const imgUrl = ref('')
  const time = ref(3)
  const timer = ref(null)
  onLoad(() => {
    imagesApi()
  })
  timer.value = setInterval(() => {
    time.value--
  }, 1000)
  setTimeout(() => {
    clearInterval(timer.value);
    timer.value = null
    uni.reLaunch({
      url: '/pages/index/index'
    })
  }, 3000)
  const imagesApi = (async () => {
    const res = await images()
    if (res && res.code == 1) {
      if (!res.data || !res.data.startup_image) {
        imgUrl.value = 'https://ttj.geiqiutiyu.com/uploads/20241112/145fff0bcffecca8652c6c456a5209c5.png'
      } else {
        imgUrl.value = res.data.startup_image
      }

      uni.setStorageSync("atlas", res.data)
    }
  })

  function onSkip() {
    uni.reLaunch({
      url: '/pages/index/index'
    })
  }

  function onSkipWeb() {}
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .bootPage {
    width: 100vw;
    height: 100vh;
  }

  .content {
    width: 100%;
    height: 100%;
  }

  .content .con {
    width: 100%;
    height: 100%;
    font-size: 0;
    display: flex;
    align-items: center;
  }

  #img {
    width: 100vw;
    height: 100vh;
  }

  #timer {
    display: inline-block;
    position: fixed;
    top: 40px;
    right: 10px;
  }

  #info {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    color: #FFFFFF;
    font-size: 36rpx;
  }

  .circleProgress_wrapper {
    width: 36px;
    height: 36px;
    position: relative;
  }

  .wrapper {
    width: 18px;
    height: 36px;
    position: absolute;
    top: 0;
    overflow: hidden;
  }

  .right {
    right: 0;
  }

  .left {
    left: 0;
  }

  .circleProgress {
    width: 32px;
    height: 32px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
  }

  .rightcircle {
    border-top: 2px solid #03A9F4;
    border-right: 2px solid #03A9F4;
    right: 0;
    -webkit-animation: circleProgressLoad_right 4s linear;
    /*动画停留在最后一帧*/
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
  }

  .leftcircle {
    border-bottom: 2px solid #03A9F4;
    border-left: 2px solid #03A9F4;
    left: 0;
    -webkit-animation: circleProgressLoad_left 6s linear;
    /*动画停留在最后一帧*/
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
  }

  @-webkit-keyframes circleProgressLoad_right {
    0% {
      border-top: 2px solid #03A9F4;
      border-right: 2px solid #03A9F4;
      -webkit-transform: rotate(45deg);
    }

    50% {
      border-top: 2px solid #03A9F4;
      border-right: 2px solid #03A9F4;
      border-left: 2px solid #FFFFFF;
      border-bottom: 2px solid #FFFFFF;
      -webkit-transform: rotate(225deg);
    }

    100% {
      border-left: 2px solid #FFFFFF;
      border-bottom: 2px solid #FFFFFF;
      -webkit-transform: rotate(225deg);
    }
  }

  @-webkit-keyframes circleProgressLoad_left {
    0% {
      border-bottom: 2px solid #03A9F4;
      border-left: 2px solid #03A9F4;
      -webkit-transform: rotate(45deg);
    }

    50% {
      border-bottom: 2px solid #03A9F4;
      border-left: 2px solid #03A9F4;
      border-top: 2px solid #FFFFFF;
      border-right: 2px solid #FFFFFF;
      -webkit-transform: rotate(45deg);
    }

    100% {
      border-top: 2px solid #FFFFFF;
      border-right: 2px solid #FFFFFF;
      -webkit-transform: rotate(225deg);
    }
  }
</style>